import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/*
* Widget管理自身状态
*/

class TapboxA extends StatefulWidget {
  TapboxA({required Key key}) : super(key: key);

  @override
  _TapboxAState createState() => new _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    print("点击事件");
    setState(() {
      _active = !_active;
    });
  }

  void parentMangerStatus(bool newValue) {
    print("点击事件-父类管理状态");
    setState(() {
      _active = !_active;
    });
  }

  void startParentBStatus() {
    print("父类管理状态");
    // Navigator.pushNamed(context, "ParentBWidget", arguments: "父类管理状态");
    //这种方法无效，因为直接使用StatelessWidget方法里面 没有 setState 方法导致虽然值改变了 但是ui树未构建
    // Navigator.push(context, MaterialPageRoute(builder: (context) {
    //   return  new _TapboxB(
    //     active: _active,
    //     onChanged: parentMangerStatus,
    //   );
    // }));

    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return new ParentBWidget(_active);
    }));
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
      onLongPress: startParentBStatus,
      onTap: _handleTap, //点击的手势
      child: Column(children: <Widget>[
        TextButton(
          child: Text('点击切换'),
          onPressed: () => _handleTap,
        ),
        Container(
          width: 200.0,
          height: 200.0,
          decoration: new BoxDecoration(
            color: _active ? Colors.lightGreen[700] : Colors.grey[600],
          ),
        ),
      ]),
    );
  }
}

/*
* 父类传递事件给子类Widget管理自身状态
*/

class ParentBWidget extends StatefulWidget {
  bool _active = false;

  ParentBWidget(bool _active) {
    this._active = _active;
  }

  @override
  _ParentWidgetState createState() => new _ParentWidgetState(this._active);
}

class _ParentWidgetState extends State<ParentBWidget> {
  bool _active = false;

  _ParentWidgetState(bool _active) {
    this._active = _active;
  }

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new _TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

class _TapboxB extends StatelessWidget {
  _TapboxB({Key? key, this.active: false, required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;
  // var onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  void startHunHe(BuildContext context) {
    print("混合父类子类共同管理状态");

    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return new ParentWidgetC();
    }));
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
      onLongPress: () {
        startHunHe(context);
      }, //导航到新路由,
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(

          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

//---------------------------- ParentWidget ----------------------------

class ParentWidgetC extends StatefulWidget {
  @override
  _ParentWidgetCState createState() => new _ParentWidgetCState();
}

class _ParentWidgetCState extends State<ParentWidgetC> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//----------------------------- TapboxC ------------------------------

class TapboxC extends StatefulWidget {
  TapboxC({Key? key, this.active: false, required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  @override
  _TapboxCState createState() => new _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    // 在按下时添加绿色边框，当抬起时，取消高亮
    return new GestureDetector(
      onTapDown: _handleTapDown,
      // 处理按下事件
      onTapUp: _handleTapUp,
      // 处理抬起事件
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        child: Center(
          child: Text.rich(TextSpan(children: [
            TextSpan(
                text: widget.active ? 'Active' : 'Inactive',
                style: TextStyle(fontSize: 32.0, color: Colors.white)),
            TextSpan(
                text: widget.active ? 'Active，富文本变色拼接控件' : 'Inactive富文本变色拼接控件',
                style: TextStyle(fontSize: 16.0, color: Color(0x1A0B21B4),  fontFamily: 'RalewayTgw')),
          ])),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? new Border.all(
                  color: Color(0xFF19CDBC),
                  width: 10.0,
                )
              : null,
        ),
      ),
    );
  }
}
